<template>
    <div class="cloud-village" style="background-color: #e0f7fa;">
      <div class="header">
        <h2>网易云云村</h2>
      </div>
      <div class="song-list">
        <h3>热门歌曲</h3>
        <ul>
          <li>《十年》 - 陈奕迅</li>
          <li>《青花瓷》 - 周杰伦</li>
          <li>《爱情转移》 - 陈奕迅</li>
        </ul>
      </div>
      <div class="playlist-section">
        <h3>热门歌单</h3>
        <ul>
          <li>《星辰旋律之旅》 - 甄智博</li>
          <li>《梦幻音波之境》 - 刘亚杰</li>
          <li>《灵魂旋律乐章》 - 刘亚杰 2 号</li>
        </ul>
      </div>
      <div class="footer">
        <p>© 网易云音乐 2024</p>
      </div>
    </div>
  </template>

  <script setup>

  </script>

  <style scoped>
  .cloud-village {
      padding: 20px;
    }
  .header {
      background-color: #f8f9fa;
      padding: 15px;
      border-bottom: 1px solid #dee2e6;
    }
  .song-list h3,
  .playlist-section h3 {
      margin-top: 20px;
    }
  .song-list ul,
  .playlist-section ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }
  .song-list ul li,
  .playlist-section ul li {
      padding: 10px 0;
      border-bottom: 1px solid #dee2e6;
    }
  .footer {
      margin-top: 20px;
      text-align: center;
    }
  </style>
